<template>
  <div class="box main" :style="style">
    <div class="error">
      <span class="error-con">哎呀，你访问的页面不存在！</span>
      <span>你输入的网址有误或链接已经过期。</span>
      <span class="error-home">
        <a href="#" @click.prevent="goBack">返回首页</a>
      </span>
    </div>
  </div>
</template>

<script setup>
import bgError from '@/assets/bgerror.png'

// 你项目里如果用全局配置，通常是挂载到 app.config.globalProperties
// 在 setup 里没法直接用 this.$config，这里举例用 inject 或直接导入配置文件
const router = useRouter()
const config = inject('config')
const style = {
  backgroundImage: `url(${bgError})`,
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
}

const goBack = () => {
  router.push(config.HOME_PAGE.path)
}
</script>

<style scoped>


.box {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative
}

.main .error {
  width: 100%;
  padding: 40% 0 50px;
  text-align: center;
  color: #29AAE3
}

.main .error span {
  display: block;
  font-size: 16px;
  margin: 5px 0
}

.main .error span.error-con {
  font-size: 24px
}

.main .error span.error-home {
  font-size: 24px;
  font-weight: 800;
  margin: 10px 0
}

.main .error a {
  color: #29AAE3
}
</style>
